import React, { Component } from "react";

import Footer from "../../components/Footer";
import * as api from "api/index";
import "./index.scss";
import res from "antd-mobile-icons/es/AaOutline";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 分类列表
      typeList: [
        // {
        //   hashid: "0r8ej6Kenk",
        //   holiday: true,
        //   icon: "http://static.huruqing.cn/villa/67-15986836140730.jpg",
        //   id: 67,
        //   island: false,
        //   name: "海边别墅",
        //   party: false,
        //   reDesc: "临海",
        //   sceneJson: '{"id":67,"type":0}',
        // }
      ],

      // 城市列表
      cityList: [
        // {
        //   id: 1987,
        //   name: "深圳",
        // }
      ],

      // 房源列表
      sourceList: [
        // {
        //   id: 88870280,
        //   collectNum: 117,
        //   imageUrl:
        //     "https://img.villaday.com/images/house_392/88870280/88870280-10-14757134.jpg",
        //   showMinPrice: "3288",
        //   name: "大鹏古城·​千语居7房客栈",
        //   description: "浪漫美景+免费WIFI、电视、齐全设备=完美假期。",
        //   city: "深圳",
        //   area: "大鹏新区",
        //   street: "深圳市区大鹏新区大鹏所城",
        // }
      ],
    };
  }

  // 调用获取数据函数
  componentDidMount() {
    this.getTypeList();
    this.getCityList();
    this.getSourceList();
  }

  // 获取分类数据函数
  getTypeList() {
    api.$houseScene().then((res) => {
      console.log(res);
      this.setState({
        typeList: res.result,
      });
    });
  }

  // 获取城市数据函数
  getCityList() {
    api.$housecity().then((res) => {
      console.log(res);
      this.setState({
        cityList: res.result,
      });
    });
  }

  // 获取房源数据函数
  getSourceList() {
    api.$houseList().then((res) => {
      console.log(res);
      this.setState({
        sourceList: res.result,
      });
    });
  }

  render() {
    return (
      <div className="home-index">
        {/* 头部 */}
        <div className="home-top bg-fff w100 flex jc-sa aic fixed">
          <img src="	http://static.huruqing.cn/villa/logo.png" alt="" />
          <p className="iconfont icon-search flex jc-c aic">
            <input
              className="f12 "
              type="text"
              placeholder="搜索关键字/城市/别墅名"
            />
          </p>
        </div>

        {/* 轮播图 */}
        <div className="image w100 ">
          <img src="	http://static.huruqing.cn/villa/391-14747552.jpg" alt="" />
        </div>

        {/* 热门推荐 */}
        <div className="hot w100 bg-fff body">
          <p className="title flex aic f14 pl-10">热门推荐</p>
          <ul className="list wrap jc-sa f12">
            {this.state.typeList.map((item) => (
              <li className="item wrap jc-c" key={item.id}>
                <img src={item.icon} alt="" />
                <span>{item.name}</span>
              </li>
            ))}
            <li className="item wrap jc-c"></li>
          </ul>
        </div>

        {/* 热门城市 */}
        <div className=" w100 city bg-fff mt-10 body">
          <p className="title flex aic pl-10 f14">热门城市</p>
          <ul className="list w100 wrap ">
            {this.state.cityList.map((item) => (
              <li className="item" key={item.id}>
                {item.name}
              </li>
            ))}
          </ul>
        </div>

        {/* 目的地推荐 */}
        <div className="address mt-10 w100">
          <p className="title bg-fff flex aic pl-10">目的地推荐</p>

              {this.state.sourceList.map((item) => (
              <div key={item.id}>
                <div className="content w100 rel">
                  <img src={item.imageUrl} alt=""/>
                  <div className="money f12 fff abs">￥{item.showMinPrice}</div>
                </div>
                <div className="intr bg-fff pb-5 pt-20 pb-10">
                  <div className="box pl-20 fdc jc-sa f12">
                    <p>{item.name}</p>
                    <p className="mt-10 mb-10">{item.description}</p>
                    <p className="fff pl-5 pr-5">{item.city} ● {item.area}</p>
                  </div>
                </div>
              </div>
              ))}
          
        </div>

        <Footer name="home" />
      </div>
    );
  }
}

export default Home;
